<template>

  <view v-else class="container m-b5 bs-order-list">

    <view class="goods-detail-box">
      <view class="header f-28 col-3">
        <view @tap.stop.prevent="bindHeaderTap" :class="dataType === 'all' ? 'active' : ''" data-type="all">
          <text>全部</text>
        </view>
        <view @tap="bindHeaderTap" :class="dataType === 'payment' ? 'active' : ''" data-type="payment">
          <text>待付款</text>
        </view>
        <view @tap="bindHeaderTap" :class="dataType === 'checking' ? 'active' : ''" data-type="checking">
          <text>审核中</text>
        </view>
        <view @tap="bindHeaderTap" :class="dataType === 'delivery' ? 'active' : ''" data-type="delivery">
          <text>待发货</text>
        </view>
        <view @tap="bindHeaderTap" :class="dataType === 'received' ? 'active' : ''" data-type="received">
          <text>待收货</text>
        </view>
        <view @tap="bindHeaderTap" :class="dataType === 'comment' ? 'active' : ''" data-type="comment">
          <text>待评价</text>
        </view>
      </view>
      <scroll-view :scroll-y="true">
        <view v-if="!hasLogin" class="empty need_login">
          <u-empty text="未登录" mode="permission">
            <button size="mini" slot="bottom" class="go-to-login"
                    @click="gotoPath('/pages/login/index?from=order_list&' + serializeParam(options),false)">请先登录
            </button>
          </u-empty>
        </view>

        <view class="wrapper data-list " v-else >
          <view class="search-box m-top10">
              <u-search :show-action="true"
                        :show-icon="true"
                        shape="square"
                        bg-color="white"
                        v-model="keyword"
                        :show-action-icon="true"
                        :placeholder="'订单搜索'"
                        @search="search"
                        @custom="search"
                        @clear="search"
              />
            </view>
          <view v-if="list.length">

            <view class="m-top10" @tap.stop.prevent="navigateToDetail" :data-order_sn="item.order_sn"
                  v-for="(item, index) in list" :key="index">
              <view class="order-box b-f">
                <view class="order-header dis-flex">
                  <view class="flex-box t-l">
                    <text :class="'title '+'bs-'+item.title.color ">{{ item.title.text }}</text>
                    <countdown v-if="item.pay_expire_seconds > 0" :expire-time="item.pay_expire_seconds">
                      <text class="bs-red" slot-scope="{ time }">支付剩余：{{ time }}</text>
                    </countdown>
                  </view>
                  <view class="flex-box t-r">
                    <text class="cont">{{ item.order_status_desc }}</text>
                  </view>
                </view>
              </view>

              <view class="order-box b-f">
                <view class="order-cont dis-flex">
                  <view class="order-num ">
                    <text>订单号：<text class="order-status-text">{{ item.order_sn }}</text></text>
                  </view>
                  <view class="order-time">
                    <text>{{ item.created_at }}</text>
                  </view>
                </view>
              </view>

              <view class="order-box order-img_list">
                <view class="order-shop">
                  <view class="order-list-box dis-flex">
                    <view class="left">
                      <view class="dis-flex">
                        <view class="order-shop-left" v-for="(item, index1) in item.goods" :key="index1">
                          <image :src="item.goods_image"></image>
                        </view>
                      </view>
                    </view>
                    <view class="right dis-flex flex-x-center flex-y-center">
                      <text class="goods-number">共{{ item.goods.length }}件</text>
                      <text class="iconfont icon-xiangyoujiantou user-orderJtou"></text>
                    </view>
                  </view>
                </view>
              </view>

              <view class="order-box b-f">
                <view class="order-btn dis-flex">
                  <view class="order-left">
                    <view class="text">
                      <text>应付金额：</text>
                      <text class="col-m">￥{{ item.order_pay_price }}</text>
                    </view>
                  </view>
                  <view class="order-right">
                    <view class="btn-group dis-flex">
                      <view class="" v-if="item.buttons.cancel">
                        <view @tap.stop.prevent="cancelOrder" class="btn-default" :data-order_sn="item.order_sn">取消
                        </view>
                      </view>
                      <view class="" v-if="item.buttons.delete">
                        <view @tap.stop.prevent="deleteOrder" class="btn-default" :data-order_sn="item.order_sn">删除
                        </view>
                      </view>
                      <view class="" v-if="item.buttons.payment">
                        <view @tap.stop.prevent="navigateToDetail" class="btn-main" :data-order_sn="item.order_sn">付款
                        </view>
                      </view>
                      <view class="" v-if="item.buttons.received">
                        <view @tap.stop.prevent="receipt" class="btn-main" :data-order_sn="item.order_sn">确认收货
                        </view>
                      </view>
                      <view class="" v-if="item.buttons.comment">
                        <view @tap.stop.prevent="comment" class="btn-default" :data-order_sn="item.order_sn">评价</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else>
          <view class="bsshop-notcont">
            <u-empty text="暂无数据" mode="order"></u-empty>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import order_api from "@/common/order_api";
import Countdown from "@/pages/packageA/components/Countdown.vue";
export default {
  components: {
    Countdown
  },
  data() {
    return {
      dataType: 'all',
      keyword: '',
      page:0,
      limit:10,
      list: [],
      options: {}
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad: function (options) {
    this.dataType = options.type || 'all';
    this.options = options;
    this.setData({
      dataType: this.dataType
    });
    // 获取订单列表
    this.getOrderList(this.dataType,true);
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },
  onPullDownRefresh: function () {
    this.getOrderList(this.dataType,true);
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 2000)
  },
  //触底
  onReachBottom() {
   this.getOrderList(this.dataType)
  },
  methods: {
    search: function () {
      this.list = [];
      this.page = 0;
      this.getOrderList(this.dataType);
    },
    /**
     * 获取订单列表
     */
    getOrderList(dataType,isInit) {
      let that = this;
      if (isInit===true){
        that.page = 0;
        that.list = [];
      }
      uni.showLoading({
        title: '加载中'
      })
      that.page++;
      order_api.list({
        dataType: dataType,
        keywords: that.keyword,
        page: that.page,
        limit: that.limit
      }).then(res => {
        if (res.code !== 0) {
          that.$u.toast(res.msg);
          return;
        }
        this.setData({
          list:that.list.concat(res.data.list)
        })
      }).finally(() => {
        uni.hideLoading();
      })

    },

    /**
     * 切换标签
     */
    bindHeaderTap: function (e) {
      this.setData({
        list: [],
        page: 0,
        dataType: e.currentTarget.dataset.type
      });

      // 获取订单列表
      this.getOrderList(e.currentTarget.dataset.type);
    },

    /**
     * 取消订单
     */
    cancelOrder: function (e) {
      let that = this;
      let order_sn = e.currentTarget.dataset.order_sn;
      uni.showModal({
        title: '',
        content: '确认取消订单？',
        success: function (o) {
          if (o.confirm) {
            order_api.cancel({
              order_sn: order_sn
            }).then(res => {
              that.show_msg(res.msg, 'none', 1500, function () {
                if (res.code === 0) {
                  that.getOrderList(that.dataType,true);
                }
              })
            })
          }
        }
      });
    },

    deleteOrder: function (e) {
      let that = this;
      let order_sn = e.currentTarget.dataset.order_sn;
      uni.showModal({
        title: '',
        content: '确认删除订单？',
        success: function (o) {
          if (o.confirm) {
            order_api.remove({
              order_sn: order_sn
            }).then(res => {
              that.show_msg(res.msg, 'none', 1500,function () {
                if (res.code === 0) {
                  that.getOrderList(that.dataType,true);
                }
              })
            })
          }
        }
      })
    },

    /**
     * 确认收货
     */
    receipt: function (e) {
      let that = this;
      let order_sn = e.currentTarget.dataset.order_sn;
      uni.showModal({
        title: '提示',
        content: '确认收到商品？',
        success: function (o) {
          if (o.confirm) {
            order_api.confirm({
              order_sn: order_sn
            }).then(res => {
              that.show_msg(res.msg, 'none', 1500, function () {
                if (res.code === 0) {
                  that.getOrderList(that.dataType,true);
                }
              })
            })
          }
        }
      });
    },


    /**
     * 订单评价
     */
    comment: function (e) {
      let that = this;
      let order_sn = e.currentTarget.dataset.order_sn;
      uni.navigateTo({
        url: '/pages/packageA/comment/submit/form?order_sn=' + order_sn
      });
    },

    /**
     * 跳转订单详情页
     */
    navigateToDetail: function (e) {
      let order_sn = e.currentTarget.dataset.order_sn;
      uni.navigateTo({
        url: '/pages/packageA/order/detail?order_sn=' + order_sn
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
